<template>
    <div class="add">
        <el-steps :active="tabId-1" align-center>
            <el-step v-for="(item, index) in tabs" :key="index" :title="item.title" description="Some description" />
            <el-step title="完成" description="Some description" />
        </el-steps>
        <el-tabs v-model="tabId" tab-position="left" class="demo-tabs margin" @tab-click="tabChange">
            <el-tab-pane v-for="(item, index) in tabs" :key="index" :name="item.id" :label="item.title">
                <!-- 一 -->
                <el-form  :label-position="'top'" v-if="item.id == dialog[0].show" :model="dialog[0].data">
                    <el-form-item v-for="(item, index) in dialog[0].data" :key="index" :label="item.name">
                        <el-input v-if="!item.slot" :style="'width:'+item.width" :placeholder="item.placeholder" v-model="item.value" autocomplete="off" />
                        <el-cascader v-if="item.slot" v-model="item.value" :options="item.options" :props="item.props" @change="changeCascader(item.value)" />
                    </el-form-item>
                </el-form>
                <!-- 二 -->
                <el-form  v-if="item.id == dialog[1].show" label-position="top">
                    <el-form-item v-for="(item, index) in dialog[1].data" :key="index" :label="item.attr_name">
                        <el-tag
                        class="mx-1 tagMargin"
                         v-for="(it, ins) in item.attr_vals.split(',')" 
                         :key="ins"
                         closable
                         @close="delCheck(item.attr_vals,it,item.attr_id)"
                        >
                            {{it}}
                        </el-tag>
                    </el-form-item>
                </el-form>
                <!-- 三 -->
                <el-form  v-if="item.id == dialog[2].show" label-position="top">
                    <el-form-item v-for="(item, index) in dialog[2].data" :key="index" :label="item.attr_name">
                        <el-input
                        class="mx-1 tagMargin"
                         closable
                         @close="delCheck(item.attr_vals,item.attr_id)"
                         v-model="item.attr_vals"
                         />
                    </el-form-item>
                </el-form>
                <!-- 四 -->
                <el-upload
                    v-if="item.id == dialog[3].show"
                    v-model:file-list="dialog[3].data"
                    class="upload-demo"
                    action="https://lianghj.top:8888/api/private/v1/upload"
                    :on-success="handlePreview"
                    :headers="token"
                    method="post"
                    :on-remove="handleRemove"
                    list-type="picture"
                >
                    <el-button type="primary">点击上传</el-button>
                </el-upload>
                <!-- 五 -->
                <el-form class="form" v-if="item.id == dialog[4].show">
                    <QuillEditor />
                    <el-button type="primary" @click="add">添加</el-button>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import { ref ,onMounted } from 'vue'
import { getCate } from '@/utils/categories.js'
import { getParams } from '@/utils/params.js'
import { addGoods } from '@/utils/goods.js'
import { useRouter } from  'vue-router'
import { ElMessage, ElMessageBox } from "element-plus";
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const tabId = ref(1);
const tabs = [
    {
        id:1,
        title:'基本信息',
    },
    {
        id:2,
        title:'商品参数',
    },
    {
        id:3,
        title:'商品属性',
    },
    {
        id:4,
        title:'商品图片',
    },
    {
        id:5,
        title:'商品内容',
    }
];
const dialog = ref([
    {
        show:1,
        data:[
            {
                name:'商品名称',
                placeholder:'',
                value:'',
                width:'100%',
                prop:'goods_name'
            },
            {
                name:'商品价格（元）',
                placeholder:'',
                value:'0',                
                width:'100%',
                prop:'goods_price'
            },
            {
                name:'商品重量',
                placeholder:'',
                value:'0',
                width:'100%',
                prop:'goods_weight'
            },
            {
                name:'商品数量',
                placeholder:'',
                value:'0',          
                width:'100%',
                prop:'goods_number'
            },
            {
                name:'商品分类',
                slot:'cate',
                value:[],
                prop:'goods_cat',
                width:'100%',
                options:[],
                props:{label:'cat_name',value:'cat_id'}
            }
        ],
    },
    {
        show:2,
        data:[]
    },
    {
        show:3,
        data:[]
    },
    {
        show:4,
        data:[]
    },
    {
        show:5,
        data:[]
    }

])
const form = ref([]);
const files = ref([]);
const router = useRouter();
const token = {
  'Authorization': JSON.parse(localStorage.getItem('users')).token
}
// 添加
const add = async ()=>{
    var form = {};
   dialog.value[0].data.map(item=>{
        return form[item.prop] = item.value
    })
    form.pics = files.value;
    form.goods_cat = form.goods_cat.join(',')
    // console.log(form)
    let data = await addGoods(form);
    if(data.meta.status == 201){
        ElMessage.success(data.meta.msg);
        router.push('/goods')
    }
    // console.log(data);
}
// 上传图片
const handlePreview = (uploadFile)=>{
    files.value.push({pic:uploadFile.data.url})
    // console.log(uploadFile.data.url);
}
// 取消上传
const handleRemove = (file)=>{
    dialog.value[3].data.forEach(item=>{
        console.log(item.name);
    })
    // console.log(file)
}
// 切换
const tabChange = async (TabsPaneContext)=>{
    tabId.value = TabsPaneContext.props.name;
    if(tabId.value == 3){
        let data = await getParams(dialog.value[0].data[4].value[2],'only');
        dialog.value[2].data = data.data;
        console.log(dialog.value[2].data)
    }
}
// 分类表
const getCateList = async ()=>{
    let data = await getCate(3);
    dialog.value[0].data[4].options = data.data;
}
// 参数表
const changeCascader = async (val)=>{
    // console.log(val[2])
    let type = '';
    let data = await getParams(val[2],'many');
    // console.log(data)
    dialog.value[1].data = data.data;
    console.log(dialog.value[1].data)
}
// attr_vals
const delCheck = (vals,val,id)=>{
    let arr = vals.split(',');
    let index = arr.findIndex(item=>{
        return item == val
    })
    var aa = []; 
    dialog.value[1].data.forEach(item=>{
        if(item.attr_id == id){
            aa = item
        }
    })
    arr.splice(index,1);
    if(arr == []){
        return aa.attr_vals = null
    }
    aa.attr_vals = arr.join(',')
    console.log(aa);
}
onMounted(() => {
  getCateList();  
})

</script>
<style lang="scss" scoped>
    .margin{
        margin: 20px 0;
    }
    .tagMargin{
        margin: 5px 10px;
    }
</style>